<template>
    <div class="app-container">
        <div class="dataListBox">
            <div class="TicketsLeft">
                <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                <div>数据列表</div>
            </div>
            <div>
                <el-button type="primary" @click="addFn">添加</el-button>
            </div>


        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="product.name" label="商品名称" />
            <el-table-column prop="flashPromotionId" label="货号" />
            <el-table-column prop="product.price" label="商品价格" />
            <el-table-column prop="product.stock" label="剩余数量" />
            <el-table-column prop="flashPromotionPrice" label="秒杀价格 ">
            </el-table-column>
            <el-table-column prop="flashPromotionLimit" label="秒杀数量">
            </el-table-column>
            <el-table-column prop="flashPromotionCount" label="限购数量">
            </el-table-column>
            <el-table-column prop="sort" label="排序">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="editFn(row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteFn(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :flashRuleForm="tableData" />

        </div>

        <flashProductRelationDialog :flashProductDialogVisible="flashProductDialogVisible" @cancel="hdCancel"
            @confirm="hdConfirm" />
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import * as http from '@/request/http';
import { reactive, ref } from 'vue';
import { Tickets } from '@element-plus/icons-vue'
import flashProductRelationDialog from "./components/flashProductRelationDialog.vue"
import useTable from '@/hooks/components/useTable'
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute()
const flashProductDialogVisible = ref(false)

console.log(route.query);
const flashPromotionId = Number(route.query.flashPromotionId)
const flashPromotionSessionId = Number(route.query.flashPromotionSessionId)
// const tableData = ref<IFlashSessionListModel[]>([])
const adminSearchVal = reactive({ flashPromotionId, flashPromotionSessionId })
const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.flashProductRelation.flashProductRelationList, adminSearchVal)

const addFn = () => {
    flashProductDialogVisible.value = true
}
const hdCancel = () => {
    flashProductDialogVisible.value = false

}
const hdConfirm = () => {
    queryList()
    flashProductDialogVisible.value = false

}
const editFn = (_row: IProductList) => {
    ElMessage.success("暂未开放该功能")
    // http.flashProductRelation.flashProductRelationUpdateById(row).then(res => {
    //     if (res.code === 200) {
    //         ElMessage.success('请求成功')
    //         queryList()
    //     }
    // }
    // )
}
const deleteFn = (id: number) => {
    console.log(id);
    ElMessageBox.confirm(
        '是否确认删除',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.flashProductRelation.flashProductRelationDeleteById(id).then(res => {
                if (res.code === 200) {
                    ElMessage.success("删除成功")
                    queryList()
                }
            })
        })
        .catch(() => {
            ElMessage.error("删除失败")
        })

}

// http.flashProductRelation.flashProductRelationList({ pageNum: 1, pageSize: 5, flashPromotionId, flashPromotionSessionId }).then(res => {
//     console.log(res);

// })
</script>

<style lang="less" scoped>
.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}

:deep(.cell) {
    text-align: center;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>